<template>
  <div class="course-create-or-edit">
    <el-form>
      <el-page-header @back="goBack">
      </el-page-header>
      <span>{{ course.courseName ? course.courseName:'新增课程' }}</span>
      <div style="height:20px"></div>
      <el-card>
        <div slot="header">
            <el-steps :active="activeStep" simple>
              <el-step v-for="(item, i) in steps" :key="item.id"
              :title="item.title" :icon="item.icon"
              @click.native="activeStep = i"></el-step>
            </el-steps>
        </div>
        <!-- 步骤对应的表单结构 -->
        <el-form label-width="80px">
            <!-- 基本信息 -->
          <div v-show="activeStep === 0">
            <h3>基本信息</h3>
            <el-form-item label="课程名称">
                <el-input v-model="course.courseName"></el-input>
            </el-form-item>
            <el-form-item label="课程简介">
                <el-input v-model="course.brief"></el-input>
            </el-form-item>
            <el-form-item label="讲师姓名">
                <el-input v-model="course.teacherDTO.teacherName"></el-input>
            </el-form-item>
            <el-form-item label="职位">
                <el-input v-model="course.teacherDTO.position"></el-input>
            </el-form-item>
            <el-form-item label="讲师简介">
                <el-input v-model="course.teacherDTO.description"></el-input>
            </el-form-item>
            <el-form-item label="课程概述">
                <el-input style="width:45%;min-width:300px;margin-right: 15px" placeholder="概述一"
                v-model="course.previewFirstField">
                <template slot="append">{{ course.previewFirstField.length }}/20</template>
                </el-input>
                <el-input style="width:45%;min-width:300px" placeholder="概述二"
                v-model="course.previewSecondField"></el-input>
            </el-form-item>
              <el-form-item label="课程排序">
                <template>
                  <el-input-number
                  label="描述文字" v-model="course.sortNum" controls-position="right"
                  ></el-input-number>
                </template>
              </el-form-item>
          </div>
          <!-- 课程封面 -->
          <div v-show="activeStep === 1">
          <!-- 封装为封面上传的组件 -->
            <course-img v-model="course.courseListImg"
            label="课程封面" :limit='3'></course-img>
            <course-img v-model="course.courseImgUrl"
            label="解锁封面"></course-img>
          </div>
          <!-- 销售信息 -->
          <div v-show="activeStep === 2">
            <h3>销售信息</h3>
            <el-form-item label="售卖价格">
                <el-input type="number"
                :min="0" v-model="course.discounts">
                  <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="商品原价">
                <el-input type="number" :min="0"
                v-model="course.price">
                  <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="销量">
                <el-input type="number" :min="0"
                v-model="course.status">
                  <template slot="append">单</template>
                </el-input>
            </el-form-item>
            <el-form-item label="活动标签">
                <el-input v-model="course.discountsTag">
                </el-input>
            </el-form-item>
          </div>
          <!-- 秒杀活动 -->
          <div v-show="activeStep === 3">
            <h3>秒杀活动</h3>
            <el-form-item label="限时秒杀开关" label-width="120px">
                <el-switch v-model="course.activityCourse"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <template v-if="course.activityCourse">
              <el-form-item label="开始时间">
                  <el-date-picker
                    v-model="course.activityCourseDTO.beginTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">
                  <el-date-picker
                    v-model="course.activityCourseDTO.endTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="秒杀价">
                <el-input v-model="course.activityCourseDTO.amount"
                type="number" :min="0">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="秒杀库存">
                <el-input v-model="course.activityCourseDTO.stock"
                type="number" :min="0">
                  <template slot="append">个</template>
                </el-input>
              </el-form-item>
            </template>
          </div>
          <!-- 课程详情 -->
          <div v-show="activeStep === 4">
            <h3>课程详情</h3>
            <!-- 描述文本区域 -->
            <el-form-item label="请描述课程详情：" label-width="140px">
                <!-- <el-input type="textarea"
                v-model="course.courseDescriptionMarkDown"></el-input> -->
                <text-editor v-model="course.courseDescriptionMarkDown"></text-editor>
            </el-form-item>
            <!-- 是否商上架提示 -->
            <el-form-item label="请选择是否上架：" label-width="140px">
              <el-switch v-model="course.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
          </div>
          <!-- 设置保存按钮 -->
          <el-form-item>
            <el-button type="primary" @click="saveCourse" :disabled="isLoading"
            v-if="activeStep === steps.length-1">保存</el-button>
          </el-form-item>
          <!-- 设置下一步按钮 -->
          <el-form-item>
            <el-button style="margin-top: 12px;"
            @click="activeStep++" v-if="activeStep !== steps.length-1">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { saveOrUpdateCourse, getCourseById } from '@/services/course'
import CourseImg from './course-img'
// 引⼊富⽂本编辑器
// import E from 'wangeditor'

// 引⼊富⽂本编辑器组件
import TextEditor from '@/components/Text-editor'
export default {
  name: 'CourseCreateOrEdit',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    courseId: {
      type: [Number, String]
    }
  },
  components: {
    CourseImg,
    TextEditor
  },
  created () {
    // 检测是否为编辑功能
    if (this.isEdit) {
      this.loadCourse()
    }
  },
  // 编辑课程需要与id相关的内容 而添加课程不需要与id相关的数据去除数据
  data () {
    return {
      activeStep: 0,
      // 步骤条相关信息
      steps: [
        { title: '基本信息', icon: 'el-icon-edit', id: 1 },
        { title: '课程封面', icon: 'el-icon-picture', id: 2 },
        { title: '销售信息', icon: 'el-icon-edit', id: 3 },
        { title: '秒杀信息', icon: 'el-icon-edit', id: 4 },
        { title: '课程详情', icon: 'el-icon-upload', id: 5 }
      ],
      // 本地预览图片地址
      imageUrl: '',
      // 秒杀状态
      // isSeckill: false,
      // 添加课程相关信息
      course: {
        // id: 0,
        // 课程名称
        courseName: '',
        brief: '',
        teacherDTO: {
          // id: 0,
          // courseId: 0,
          // 讲师名称
          teacherName: '',
          teacherHeadPicUrl: '',
          position: '',
          // 讲师介绍
          description: ''
        },
        // 课程详情内容描述
        courseDescriptionMarkDown: '',
        price: 0,
        // 售卖价格
        discounts: 0,
        priceTag: '',
        // 活动标签
        discountsTag: '',
        isNew: true,
        isNewDes: '',
        // 课程封面地址
        courseListImg: '',
        // 解锁封面地址
        courseImgUrl: '',
        // 课程排序
        sortNum: 0,
        // 概述一
        previewFirstField: '',
        // 概述二
        previewSecondField: '',
        // 课程上架状态，0-草稿，1-上架
        status: 0,
        // 销量
        sales: 0,
        // 参与秒杀活动课程
        activityCourse: false,
        activityCourseDTO: {
          // id: 0,
          // courseId: 0,
          // 开始时间
          beginTime: '',
          // 结束时间
          endTime: '',
          // 秒杀价格
          amount: 0,
          // 秒杀库存
          stock: 0
        },
        autoOnlineTime: ''
      }
    }
  },
  // // 由于需要进⾏ DOM 操作，使⽤ mounted 钩⼦
  // mounted () {
  //   // 初始化富文本编辑器
  //   this.initEditor()
  // },
  methods: {
    // 保存课程
    async saveCourse () {
      const { data } = await saveOrUpdateCourse(this.course)
      // console.log(data)
      if (data.code === '000000') {
        this.$message.success(`${this.isEdit ? '编辑课程' : '添加课程'}保存成功`)
        this.$router.push({
          name: 'course'
        })
      }
    },
    // 编辑功能根据ID加载课程信息数据
    async loadCourse () {
      const { data } = await getCourseById(this.courseId)
      // console.log(data)
      if (data.code === '000000') {
        // 判断当前课程是否是开启秒杀的状态，如果未开启秒杀需要初始化数据
        if (!data.data.activityCourse) {
          data.data.activityCourseDTO = {
            // 开始时间
            beginTime: '',
            // 结束时间
            endTime: '',
            // 秒杀价格
            amount: 0,
            // 秒杀库存
            stock: 0
          }
        }
      }
      this.course = data.data
    },
    goBack () {
      this.$router.push({
        name: 'course'
      })
    }
    // initEditor () {
    //   // 创建富⽂本编辑器实例
    //   const editor = new E(this.$refs.editor)
    //   // 初始化富⽂本编辑器
    //   editor.create()
    // }
  }
}
</script>

<style lang="scss" scoped>
.el-step {
  cursor: pointer
}
</style>
